<template>
    <div class="app-container">
      <div class="container">
        <el-row>
          <el-col :span="24" :xs="24">
            <div class="title">规则设置</div>
          </el-col>
        </el-row>
  <!--      内容-->
        <el-row>
          <el-col :span="24" :xs="24">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="传感器" name="first">
                <!-- 搜索 -->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <Search
                        :search-data="searchData"
                        :search-params="queryParams"
                        @change="searchParamsUpdate"
                    >
                    </Search>
                  </el-col>
                </el-row>
                <!--    显隐列-->
                <el-row :gutter="10">
                  <el-col :span="1">
                    <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
                  </el-col>
                </el-row>
                <!--      表格-->
                <el-table
                    :data="tableData"
                    height="542px"
                    style="width: 100%;background: #002127;"
                    :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
                  <el-table-column prop="deviceName" label="设备名称" sortable show-overflow-tooltip align="center" v-if="columns[0].visible"></el-table-column>
                  <el-table-column prop="channelName" label="传感器名称" align="center" v-if="columns[1].visible"></el-table-column>
                  <el-table-column prop="channelUnit" label="通道单位" align="center" v-if="columns[2].visible"></el-table-column>
                  <el-table-column prop="setWarn" label="通道告警" align="center" v-if="columns[3].visible"></el-table-column>
                  <el-table-column prop="waveWarn" label="波动告警" align="center" v-if="columns[4].visible"></el-table-column>
                  <el-table-column prop="twoWarnUp" label="告警上限" align="center" v-if="columns[5].visible"></el-table-column>
                  <el-table-column prop="twoWarnDown" label="告警下限" align="center" v-if="columns[6].visible"></el-table-column>
                  <el-table-column prop="oneWarnUp" label="预警上限" align="center" v-if="columns[7].visible"></el-table-column>
                  <el-table-column prop="oneWarnDown" label="预警下限" align="center" v-if="columns[8].visible"></el-table-column>
                  <el-table-column prop="switchWarn" label="开关告警" align="center" v-if="columns[9].visible">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.switchWarn== 0" type="info">关闭</el-tag>
                      <el-tag v-else-if="scope.row.switchWarn== 1">开启</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="earlyWarn" label="预警开关" align="center" v-if="columns[10].visible">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.earlyWarn== 0" type="info">关闭</el-tag>
                      <el-tag v-else-if="scope.row.earlyWarn== 1">开启</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                          icon="el-icon-edit"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--    分页-->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.limit"
                        @pagination="getList"
                    />
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="监控设备" name="second">
                <!-- 搜索 -->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <Search
                        :search-data="searchData1"
                        :search-params="queryParams1"
                        @change="searchParamsUpdate1"
                    >
                    </Search>
                  </el-col>
                </el-row>
                <!--    增加-->
                <el-row :gutter="10" style="margin-bottom: 15px">
                  <el-col :span="1.5">
                    <el-button
                        style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;margin-left: 20px;"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                    >新增</el-button>
                  </el-col>
                  <el-col :span="1">
                    <right-toolbar :showSearch.sync="showSearch1" :columns="columns1"></right-toolbar>
                  </el-col>
                </el-row>
                <!--      表格-->
                <el-table
                    :data="tableData1"
                    style="width: 100%;margin-top: 10px;color: #999;background: #002127;"
                    height="530px"
                    :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
                    >
                  <el-table-column prop="deviceName" label="设备名称" align="center" sortable v-if="columns1[0].visible"></el-table-column>
                  <el-table-column prop="powerLow" label="低电压(V)" align="center" v-if="columns1[1].visible"></el-table-column>
                  <el-table-column prop="powerWarn" label="欠压(V)" align="center" v-if="columns1[2].visible"></el-table-column>
                  <el-table-column prop="signalLow" label="低信号" align="center" v-if="columns1[3].visible"></el-table-column>
                  <el-table-column prop="deviceWarn" label="设备告警" align="center" v-if="columns1[4].visible">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.deviceWarn== 0">不告警</el-tag>
                      <el-tag v-else-if="scope.row.deviceWarn== 1" type="warning">预警</el-tag>
                      <el-tag v-else-if="scope.row.deviceWarn== 2" type="danger">告警</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                          icon="el-icon-edit"
                          @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--    分页-->
                <el-row>
                  <el-col :span="24" :xs="24">
                    <pagination
                        v-show="total1>0"
                        :total="total1"
                        :page.sync="queryParams1.page"
                        :limit.sync="queryParams1.limit"
                        @pagination="getList1"
                    />
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
      <!--    设备告警规则新增-->
      <div class="add">
        <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备id" prop="deviceId">
                  <el-input v-model="form.deviceId" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="电压预警" prop="powerLow">
                  <el-input v-model="form.powerLow" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="电压告警" prop="powerWarn">
                  <el-input v-model="form.powerWarn" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="低信号预警" prop="signalLow">
                  <el-input v-model="form.signalLow" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
  <!--    传感器告警规则编辑-->
      <div class="add">
        <el-dialog :title="title1" :visible.sync="open1" width="600px" :show-close="false">
          <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备名称" prop="deviceName1">
                  <el-input v-model="deviceName1" placeholder="请输入" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="传感器名称" prop="channelName1">
                  <el-input v-model="channelName1" placeholder="请输入" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预警上限" prop="oneWarnUp">
                  <el-input v-model="form1.oneWarnUp" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预警下限" prop="oneWarnDown">
                  <el-input v-model="form1.oneWarnDown" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="告警上限" prop="twoWarnUp">
                  <el-input v-model="form1.twoWarnUp" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="告警下限" prop="twoWarnDown">
                  <el-input v-model="form1.twoWarnDown" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="通道告警设置" prop="setWarn">
                  <el-select
                      v-model="form1.setWarn"
                      placeholder="请选择"
                      filterable
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in WarnsetOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="波动告警设置" prop="waveWarn">
                  <el-input v-model="form1.waveWarn" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="预警开关" prop="earlyWarn">
                  <el-select
                      v-model="form1.earlyWarn"
                      placeholder="请选择"
                      filterable
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in WarnSwitchOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm1" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel1" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
  <!--    设备告警规则编辑-->
      <div class="add">
        <el-dialog :title="title2" :visible.sync="open2" width="600px" :show-close="false">
          <el-form ref="form2" :model="form2" :rules="rules2" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备名称" prop="deviceName2">
                  <el-input v-model="deviceName2" placeholder="请输入" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="电压预警" prop="powerLow">
                  <el-input v-model="form2.powerLow" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="电压告警" prop="powerWarn">
                  <el-input v-model="form2.powerWarn" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="低信号预警" prop="signalLow">
                  <el-input v-model="form2.signalLow" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm2" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel2" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
  
    </div>
  </template>
  
  <script>
  import {getSensorSet, reviseSensorSet, getDeviceSet, reviseDeviceSet, SaveDeviceSet} from '@/api/dev/index'
  import Search from '@/components/PageSearch'
  import RightToolbar from '@/components/RightToolbar'
  import Pagination from "@/components/Pagination/index";
  const defaultForm = {
    deviceId: '',
    powerLow: '',
    powerWarn: '',
    signalLow: ''
  }
  export default {
    name: "set",
    components: { Search, RightToolbar, Pagination },
    data() {
      return {
        // 绑定值，选中选项卡的 name
        activeName: 'first',
        // 搜索
        searchData: [
          {
            type: 'input',
            label: '关键字',
            prop: 'keyWords',
            placeholder: '请输入关键字筛选'
          }
        ],
        // 分页总条数
        total: 0,
        // 查询参数
        queryParams: {
          page: 1,
          limit: 20,
          keyWords: ''
        },
        // 显示搜索条件
        showSearch: true,
        // 列信息
        columns: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `传感器名称`, visible: true },
          { key: 2, label: `通道单位`, visible: true },
          { key: 3, label: `通道告警`, visible: true },
          { key: 4, label: `波动告警`, visible: true },
          { key: 5, label: `告警上限`, visible: true },
          { key: 6, label: `告警下限`, visible: true },
          { key: 7, label: `预警上限`, visible: true },
          { key: 8, label: `预警下限`, visible: true },
          { key: 9, label: `开关告警`, visible: true },
          { key: 10, label: `预警开关`, visible: true }
        ],
        // 表格
        tableData: [],
        searchData1: [
          {
            type: 'input',
            label: '关键字',
            prop: 'keyWords',
            placeholder: '请输入关键字筛选'
          }
        ],
        total1: 0,
        queryParams1: {
          page: 1,
          limit: 20,
          keyWords: ''
        },
        showSearch1: true,
        columns1: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `低电压(V)`, visible: true },
          { key: 2, label: `欠压(V)`, visible: true },
          { key: 3, label: `低信号`, visible: true },
          { key: 4, label: `设备告警`, visible: true }
        ],
        tableData1: [],
        // 弹出层标题
        title: "新增设备告警规则",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: Object.assign({}, defaultForm),
        // 表单校验id
        rules: {
          deviceId: [
            { required: true, message: '请输入设备id', trigger: 'blur' }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
        // 传感器告警规则编辑
        title1: "传感器告警规则编辑",
        open1: false,
        form1: {
          id: '',
          earlyWarn: '',
          setWarn: '',
          oneWarnDown: '',
          oneWarnUp: '',
          twoWarnDown: '',
          twoWarnUp: '',
          waveWarn: null
        },
        rules1: {},
        WarnsetOption: [{value: 0, label: '通道无效'},{value: 1, label: '上限告警'},
          { value: 2, label: '下限告警'},{value: 3, label: '上下限超限告警'},
          {value: 4, label: '波动告警'},{value: 5, label: '波动&上限告警'},
          {value: 6, label: '波动&下限告警'},{value: 7, label: '波动&上下限告警'}],
        WarnSwitchOption: [{value: 0, label: '关闭'},{value: 1, label: '开启'}],
        deviceName1: '',
        channelName1: '',
        ids: '',
        // 设备告警规则编辑
        title2: "设备告警规则编辑",
        open2: false,
        form2: {
          id: '',
          powerLow: '',
          powerWarn: '',
          signalLow: ''
        },
        rules2: {},
        deviceName2: '',
        idss: '',
      }
    },
    props: {},
    watch: {},
    created() {
      this.getList()
      this.getList1()
    },
    mounted() {
    },
    methods: {
      // tab选项卡
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 分页查询
      getList() {
        getSensorSet(this.queryParams).then((res) => {
          console.log(res)
          this.total = res.dataCounts
          this.tableData = res.data || []
        }).catch((err) => {
          console.log(err)
          this.$message.error(err.errorMsg)
        })
      },
      // 编辑
      handleEdit(index, row) {
        console.log(index, row);
        this.ids = row.id
        this.deviceName1 = row.deviceName
        this.channelName1 = row.channelName
        this.form1.earlyWarn = row.earlyWarn
        this.form1.setWarn = row.setWarn
        this.form1.oneWarnDown = row.oneWarnDown
        this.form1.oneWarnUp = row.oneWarnUp
        this.form1.twoWarnDown = row.twoWarnDown
        this.form1.twoWarnUp = row.twoWarnUp
        this.form1.waveWarn = row.waveWarn
        this.open1 = true
      },
      dialogCancel1() {
        this.open1 = false
      },
      submitForm1() {
        this.$refs.form1.validate((valid) => {
          if (valid) {
            const data = {
              id: this.ids,
              earlyWarn: this.form1.earlyWarn,
              setWarn: this.form1.setWarn,
              oneWarnDown: this.form1.oneWarnDown,
              oneWarnUp: this.form1.oneWarnUp,
              twoWarnDown: this.form1.twoWarnDown,
              twoWarnUp: this.form1.twoWarnUp,
              waveWarn: this.form1.waveWarn
            }
            reviseSensorSet(data).then((res) => {
              this.$message.success('编辑成功！')
              this.open1 = false
              this.getList()
            }).catch((err) => {
              this.$message.error(err.errorMsg)
            })
          } else {
            this.$message.warning('请填写相关字段内容')
            return false
          }
        })
      },
      // 新的搜索内容
      searchParamsUpdate(){
        this.getList()
      },
  
  
      //设备分页列表
      getList1() {
        getDeviceSet(this.queryParams1).then((res) => {
          console.log(res)
          this.total1 = res.dataCounts
          this.tableData1 = res.data || []
        }).catch((err) => {
          console.log(err)
          this.$message.error(err.errorMsg)
        })
      },
      // 增加
      handleAdd() {
        this.open = true
      },
      // 取消
      dialogCancel() {
        this.open = false
        this.form = Object.assign({}, defaultForm)
      },
      // 新增（确定）
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            SaveDeviceSet(this.form).then((res) => {
              this.$message.success('添加成功！')
              this.dialogCancel()
              this.getList1()
            }).catch((err) => {
              this.$message.error(err.errorMsg)
            })
          } else {
            this.$message.warning('请填写相关字段内容')
            return false
          }
        })
      },
      // 编辑
      handleEdit1(index, row) {
        console.log(index, row);
        this.idss = row.id
        this.deviceName2 = row.deviceName
        this.form2.powerLow = row.powerLow
        this.form2.powerWarn = row.powerWarn
        this.form2.signalLow = row.signalLow
        this.open2 = true
      },
      dialogCancel2() {
        this.open2 = false
      },
      submitForm2() {
        this.$refs.form2.validate((valid) => {
          if (valid) {
            const data = {
              id: this.idss,
              powerLow: this.form2.powerLow,
              powerWarn: this.form2.powerWarn,
              signalLow: this.form2.signalLow
            }
            reviseDeviceSet(data).then((res) => {
              this.$message.success('编辑成功！')
              this.open2 = false
              this.getList1()
            }).catch((err) => {
              this.$message.error(err.errorMsg)
            })
          } else {
            this.$message.warning('请填写相关字段内容')
            return false
          }
        })
      },
      searchParamsUpdate1(){
        this.getList1()
      }
    }
  }
  </script>
  
  <style lang='less' scoped>
  .app-container{
    width: 100%;
    min-height: 100%;
    // padding: 15px;
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      background: #002127;
      border-radius: 10px;
      overflow: hidden;
      .title {
        margin-left: 10px;
        height: 42px;
        line-height: 42px;
        color: #ffffff;
        font-size: 14px;padding-left: 10px;
      }
      // 面板左对齐
      ::v-deep .el-tabs__nav-scroll {
        justify-content: flex-start;
      }
      // 面板内容距离标题
      ::v-deep .el-tab-pane {
        margin-top: 15px;
      }
      //面板标题字颜色
      ::v-deep .el-tabs__item {
        color: #999999;
      }
      //鼠标经过面板标题字颜色，选中后字颜色
      ::v-deep .el-tabs__item:hover,
      ::v-deep .el-tabs__item.is-active {
        color: #FFFFFF;
      }
      // 线条颜色
      ::v-deep .el-tabs__nav-wrap::after {
        background-color: #002127;
      }
      // 点击tab时线条颜色
      ::v-deep .el-tabs__active-bar {
        background-color: #00E7E7;
      }
      // 显隐列
      .el-col-1 {
        float: right;
      }
    }
  }
  .add {
    ::v-deep(.el-dialog){
      background: rgba(4,28,33,0.8);
      box-shadow: 0px 0px 20px 0px rgba(0,231,231,0.5);
      border-radius: 20px;
      border: 1px solid rgba(0,231,231,0.698);
      //标题颜色
      .el-dialog__title {
        color: white;
      }
      // 输入框label字体颜色
      .el-form-item__label {
        color: white;
      }
      // 输入框
      .el-input__inner {
        background: #041C21;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(0,231,231,0.502);
        color: white;
      }
      // 错误规则提示
      .el-form-item__label:before {
        color: #00E7E7;
      }
      // 必填星号
      .el-form-item__error {
        color: #00E7E7;
      }
    }
  }
  // 表格设置鼠标经过时背景颜色
  ::v-deep.el-table tbody tr:hover>td{
    background-color: #02565c !important;
  }
  //表格改变每行底边框颜色
  ::v-deep.el-table  td, .el-table th.is-leaf  {
    border-bottom:  1px solid rgba(0,231,231,0.302)!important;
  }
  /*table边框颜色*/
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #002127;
  }
  ::v-deep .el-tabs__header{
    margin-left: 20px;
  }
  </style>
  